<template>
    <div>
        <el-form ref="form" :model="newRecent" size="mini">
            <el-form-item label="动态内容：" label-width="85px">
                <el-input type="textarea" v-model="newRecent.content"></el-input>
            </el-form-item>

            <el-form-item label="动态图片：">
                <el-upload action="http://192.168.11.18:8080/file/uploadImage"
                        list-type="picture-card"
                        :auto-upload="true"
                        :on-success="getUploadFileName"
                        :multiple="false">
                <i slot="default" class="el-icon-upload">
                    <h5>选择图片</h5>
                </i>
                <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                </div>
                </el-upload>
            </el-form-item>
            
        </el-form>

        <div id="btn">
            <el-button type="primary" @click="commit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button> 
        </div>
    </div>
</template>

<script>
export default {
    props:{
        recent:{}
    },
    
    data() {
      return {
        newRecent:{
            image:'',
            content:'',
        },
        dialogImageUrl: '',
      };
    },
    methods:{
        commit(){
            this.$emit("closeadd",{result:true,data:this.newRecent});
        },
        cancel(){
            this.$emit("closeadd");
        },
        getUploadFileName (res) {
            this.dialogImageUrl = res;
            this.newRecent.image = res;
            console.log(res)
        },
    }

};
</script>
<style scoped>
    #btn{
        margin-left: 370px;
    }
    h5{
        margin-top: -80px;
    }
    .el-upload--picture-card i {
        font-size: 30px;
        color: #86b2f0;
        line-height: 120px;
    }
    
</style>